/* Forms CSS Stylesheet
 * Saul Howard, CLWD, 2008
 */

/* 
 * Oedipus FORMS CSS
 * clearlinewebdesign.com 2008
 */

/*
 * The Basic-Form
 */
form#basic-form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  margin: 0 auto;
  padding: 0;
  min-width: 30em;
  max-width: 60em;
  width: 30em; 
}

form#basic-form fieldset {
  /* clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
  padding: 10px 10px 20px 10px;        /* padding in fieldset support spotty in IE */
  margin: 0;
/*  background:#ECF2FA none repeat scroll 0% 0%;*/
/*  border:1px solid #C6D9E9;*/
  
  background:#FFE2BF none repeat scroll 0% 0%;
  border:1px solid #FFC680;
}

form#basic-form fieldset legend {
	font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
                       /* be careful with padding, it'll shift the nice offset on top of border  */
}

form#basic-form label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 150px; 
	padding: 0; 
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; 
}
form#basic-form label.radio { 
	display: inline;
	float: none;
	line-height: 1.5;
}
form#basic-form input, form#basic-form textarea {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

form#basic-form input#reset {
	margin-left:0px; /* set margin-left back to zero on reset button (set above) */
}
form#basic-form input.checkbox {
	margin-right:1em; 
}


textarea { overflow: auto; }

form#basic-form small {
	display: block;
	margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px;
	font-size: 88%;
}

form#basic-form .required{font-weight:bold;} /* uses class instead of div, more efficient */

form#basic-form br {
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}
form#basic-form div.submit_buttons_div
{
	margin-left: 165px;
}
form#basic-form span.error
{
	display: block;
	margin-left: 165px;
	margin-bottom: 0.5em;
	color: red;
}


/* 
 * Table Editor Forms 
 */
div.edit-frame-forms form 
{
	clear: both;
	width: auto;
/*        background: transparent;*/
}
div.edit-frame-forms form ol
{
	/*        float: left;*/
	/*        border: 1px solid black;*/
	width: 22em;
}
div.edit-frame-forms form ol li label
{
	display:inline-block;
	float:left;
	margin: 0.5em 0.5em 0 0;
	text-align:right;
	vertical-align:middle;
	width:5em;
}
div.edit-frame-forms input
{
	width: 12em;
	font-size: 1.05em;
}
div.edit-frame-forms  input.submit
{
	width: auto;

	font-size: 0.9em;
}
div.edit-frame-forms  input#character_color
{
	width: 4em;
}
div.edit-frame-forms div.submit_buttons_div
{
	margin: -2.2em 0 0 19em;
	padding: 0.5em 0 0 0;
}
div.edit-frame-forms
{
	background-color:#FFFF99;
	padding: 0 0 1em 0;
	margin: 0 auto 3em auto;
	width: 30em;
}
div.edit-frame-form,
div.edit-character,
div.edit-option,
div.edit-frame-actions,
div.edit-character-actions,
div.edit-option-actions
{
	/*        margin: 0 auto;*/
}

div.edit-frame-form
{
	padding: 1em 0 0.5em 0;
}
div.edit-character
{
	padding: 0.5em 0 0.5em 0.5em;
	margin: 0.5em 1em 0 2em;
}
div.edit-option
{
	padding: 0.5em 0 0.5em 0.5em;
	margin: 0.2em 1em 0 4em;
}
div.edit-frame-actions
{
	padding: 0.5em 0 0 0.5em;
}
div.edit-character-actions
{
	padding: 0 0 0.5em 0.5em;
	margin: 0 1em 0 2em;
}
div.edit-option-actions
{
	padding: 0 0 0.5em 0.5em;
	margin: 0 1em 0 4em;
}
div.edit-frame-actions a,
div.edit-character-actions a,
div.edit-option-actions a
{
	color: blue;
	text-decoration:none;
}
div.edit-frame-actions a:hover,
div.edit-character-actions a:hover,
div.edit-option-actions a:hover
{
	text-decoration:underline;
}

/*
 * UL ICONS in the Table Editor Forms
 */
div.edit-frame-forms ul.frame-options li#add_new_character,
div.edit-frame-forms ul.frame-options li#add_option
{
	list-style: disc url(/images/icons/16x16/list-add.png) inside;
}
div.edit-frame-forms ul.frame-options li#delete_character,
div.edit-frame-forms ul.frame-options li#delete_option
{
	/*        list-style: disc url(/images/icons/16x16/list-remove.png) inside;*/
	list-style: disc url(/images/icons/16x16/edit-delete.png) inside;
}

/*
 * Background colors in the Table Editor Forms
 */
.edit-character {
	-moz-border-radius-topright: 20px;
	-khtml-border-top-right-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	border-top-right-radius: 20px;
	
	-moz-border-radius-topleft: 20px;
	-khtml-border-top-left-radius: 20px;
	-webkit-border-top-left-radius: 20px;
	border-top-left-radius: 20px;
}

.edit-character-actions {
	-moz-border-radius-bottomleft: 20px;
	-khtml-border-bottom-left-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	border-bottom-left-radius: 20px;
}
#blue.edit-character,
#blue.edit-option,
#blue.edit-character-actions,
#blue.edit-option-actions {
	background-color: #8080FF; /* BLUE -50% SAT. */
}
#red.edit-character,
#red.edit-option,
#red.edit-character-actions,
#red.edit-option-actions
{
	background-color: #FF8080; /* RED -50% SAT. */
}
#green.edit-character,
#green.edit-option,
#green.edit-character-actions,
#green.edit-option-actions
{
	background-color: #80FF80; /* GREEN -50% SAT. */
}
#orange.edit-character,
#orange.edit-option,
#orange.edit-character-actions,
#orange.edit-option-actions
{
	background-color: #FFE480; /* ORANGE -50% SAT. */
}

/* Edit Forms Javacript Styling */
p.hover-edit-link {
	position: absolute;
	margin: 3px 0 0 15px !important;
	color: #333;
	background: white;
	border: 1px dashed #666;
	padding: 0.5em !important;
	font-size: 90%;

	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
#name-form p.hover-edit-link {
	/*margin: -50px 0 0 0;*/
}
.replacement {
	cursor: pointer;	
	padding: 5px 0;
}
.replacement:hover {
	/*background: #F5F7FA;*/
	background: #F8F9FA;
}
